<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#canvas{
				display: block;
				margin: 100px auto 0;
				border: 1px solid #d3d3d3;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="500" height="500"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById("canvas");
			var ctx = canvas.getContext("2d");//创建2D绘图空间,画笔
			var r = [{x:10,y:9},{x:10,y:8}];//r数组表示贪吃蛇
			var co = 40;//表示前进的方向
			var e = null;//表示食物
			ctx.shadowBlur = 20;
			ctx.shadowColor = "black";
			function onframe(){
			//如果有食物,则根据蛇前进的方向判断是否吃到了食物,并且讲蛇数组中最后一个元素换到首部
			if(e){
				if((co==40&&r[0].x ==e.x&&r[0].y+1==e.y)
				||(co==38&&r[0].x ==e.x&&r[0].y-1==e.y)
				||(co==37&&r[0].x-1 ==e.x&&r[0].y==e.y)
				||(co==37&&r[0].x+1 ==e.x&&r[0].y==e.y)){
					r.unshift(e);
					e = null;
				}
			}
			//讲数组中最后一个元素换到首部
			r.unshift(r.pop());
			//根据方向，重新设定蛇数组元素的坐标，从而进行移动
			switch(co){
				case 37:
					r[0].x = r[1].x -1;
					r[0].y = r[1].y;
					break;
				case 38:
					r[0].x = r[1].x;
					r[0].y = r[1].y-1;
					break;
				case 39:
					r[0].x = r[1].x +1;
					r[0].y = r[1].y;
				    break;
				case 40:
					r[0].x = r[1].x;
					r[0].y = r[1].y+1;
					break;
			}
			//贪吃蛇移动
			
			ctx.clearRect(0,0,500,500);//清除画布
			//绘制贪吃蛇
			for(var i=0;i<r.length;i++){
				ctx.fillRect(r[i].x*10,r[i].y*10,10,10,)
			}
			//如果没有食物，则在随机位置上加入一粒食物
			if(e == null){
				e = {y:(Math.random()*50 >>> 0),x:(Math.random()*50 >>> 0) };
			}
			//如果有食物，则绘制食物
			if(e) {
				ctx.fillRect(e.x*10,e.y*10,10,10);
			}
		}
			setInterval(onframe,100);
//			加入键盘事件，用键盘来控制蛇的前进方向
			document.onkeyup = function(event){
			   if(event.keyCode>=37 &&event.keyCode <=40 && 
			   	Math.abs(event.keyCode-co) != 2){
			   		co = event.keyCode;
			   		console.log(co)
			   	}
			}
			
		</script>
	</body>
	
</html>
